<template>
  <div>
    <div class="setBox" style="height:100%">
      <h3><span>电子印章管理</span></h3>
      <div class="setContent" style="height:90%;">
        <div style="height:92%; overflow:hidden; overflow-y:auto;">
        <el-form ref="form" :model="form" label-width="150px" style=" margin:20px 0 0">
          <el-form-item label="电子印章名称">
            <el-input v-model="form.seal.name" :disabled="reson=='watch'" style="width:250px;"></el-input>
          </el-form-item>
          <el-form-item label="各校印章图片上传">
            <div class="sealList">
              <div class="sealBox" v-for="(a,index) in form.schoolSeals" :key="index">
                <h5>{{a.schoolName}}</h5>
                <!-- <div class="imgbox">
                  <img v-if="a.file" :src="a.file">
                  <i v-else class="el-icon-plus"></i>
                  <input type="file" accept="image/*" :id="'s'+index" @change="upload_photo(index,a.id,a.schoolId)">
                </div> -->
                <el-upload
                  class="avatar-uploader"
                  :disabled="reson=='watch'"
                  action="/common/file/upload"
                  :show-file-list="false"
                  :on-success="(a,b,c)=>handleAvatarSuccess(a,b,index)"
                  :data="{fileType:'Seal',flag:a.id==''?'ADD':'EDIT',fileId:a.id,schoolId:a.schoolId}"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="a.file" :src="$store.state.userModule.phurl+a.file" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>
            </div>
          </el-form-item>
        </el-form>
        </div>
        <div class="bts">
          <el-button style="width:200px;" @click="gack">取消</el-button>
          <el-button v-if="this.reson=='watch'" style="width:200px;" type="primary" @click="gack">确定</el-button>
          <el-button v-else style="width:200px;" type="primary" @click="saveSeal">确定</el-button>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag:this.$route.params.flag,
      sealId:this.$route.params.sealId,
      reson:this.$route.params.ftype,
      form:{
        seal:{
          id:'',
          name:''
        },
        schoolSeals:[]
      }
    }
  },
  mounted() {
    this.getSchoolList();
  },
  methods: {
    // 或学校列表
    getSchoolList:function(){
      this.$api.systemSetup.GetElectronicSealSchool().then(res=>{
        //console.log("加载印章学校列表",res);
        for(var a=0,len=res.data.result.length;a<len;a++){
          var scsl = new Object();
          scsl.id = "";
          scsl.schoolCode = res.data.result[a].schoolCode;
          scsl.schoolId = res.data.result[a].schoolId;
          scsl.schoolName = res.data.result[a].schoolName;
          scsl.file = "";
          this.form.schoolSeals.push(scsl);
        }
        if(this.reson=='watch'||this.reson=='change'){
          this.getDetail();
        }
      })
    },
    // 保存印章
    saveSeal:function(){
      if(this.form.seal.name==''||this.form.seal.name==null||this.form.seal.name==undefined){
        this.$message({
          message:'请输入电子印章名称',
          type:'warning'
        })
        return;
      }
      this.$api.systemSetup.SaveElectronicSeal(this.flag,this.form.seal,this.form.schoolSeals).then(res=>{
        //console.log("保存印章",res);
        if(res.data.status=="SUCCESS"){
          this.$message({
            message:'保存印章成功!',
            type: 'success'
          })
          this.$router.push({name:'ElectronicSealManagement'});
        }
      })
    },
    //  获取印章详情
    getDetail:function(){
      this.$api.systemSetup.GetElectronicSealDetail(this.sealId).then(res=>{
        //console.log("获取印章详情",res);
        this.form.seal = res.data.result.seal;
        var slist = new Array();
        slist = res.data.result.schoolSeals;
        for(var a=0,len=slist.length;a<len;a++){
          for(var b=0,lenn = this.form.schoolSeals.length;b<lenn;b++){
            if(slist[a].schoolId==this.form.schoolSeals[b].schoolId){
              this.form.schoolSeals[b].file =slist[a].fileUrl;
              this.form.schoolSeals[b].id =slist[a].id;
            }
          }
        }
      })
    },
    // 上传成功
    handleAvatarSuccess(res, file,index) {
      console.log(res);
      this.form.schoolSeals[index].id = res.result.id;
      this.form.schoolSeals[index].file = res.result.url;
      // this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        // const isJPG = file.type === 'image/jpeg';
        var testmsg = /^image\/(jpeg|png|jpg|gif|bmp)$/.test(file.type)
        const isLt2M = file.size / 1024 / 1024 < 2;

        // if (!isJPG) {
        //   this.$message.error('上传头像图片只能是 JPG 格式!');
        // }
         if (!testmsg) {
          this.$message.error('上传印章是JPG,GIF,JPEG,PNG格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传印章不能超过 2MB!');
        }
        return testmsg && isLt2M;
      },
      gack:function(){
        this.$router.go(-1);
      }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 148px;
    height: 148px;
    line-height: 148px;
    text-align: center;
  }
  .avatar {
    width: 148px;
    height: 148px;
    display: block;
  }
</style>
